<template>
  <a-card title="生活方式评估" :bordered="false" class="card-area">
    <a-spin :spinning="loading">
      <a-tabs tabPosition="top" v-model="active">
        <a-tab-pane key="1" tab="饮食情况">
          <Diet ref="lifestyleForm1" :list="list" @next="next" :lifestyle="model" @save="save" @confirm="doConfirm" />
        </a-tab-pane>
        <a-tab-pane key="2" tab="饮酒情况" class="tab-bg-color">
          <Drinking
            ref="lifestyleForm2"
            :list="list"
            @next="next"
            :lifestyle="model"
            @save="save"
            @confirm="doConfirm"
          />
        </a-tab-pane>
        <a-tab-pane key="3" tab="吸烟情况" class="tab-bg-color">
          <Smoking
            ref="lifestyleForm3"
            :list="list"
            @next="next"
            :lifestyle="model"
            @save="save"
            @confirm="doConfirm"
          />
        </a-tab-pane>
        <a-tab-pane key="4" tab="睡眠质量" class="tab-bg-color">
          <SleepQuality
            ref="lifestyleForm4"
            :list="list"
            @next="next"
            :lifestyle="model"
            @save="save"
            @confirm="doConfirm"
          />
        </a-tab-pane>
        <a-tab-pane key="5" tab="运动情况" class="tab-bg-color">
          <Movement
            ref="lifestyleForm5"
            :list="list"
            @next="next"
            :lifestyle="model"
            @save="save"
            @confirm="doConfirm"
          />
        </a-tab-pane>
      </a-tabs>
    </a-spin>
  </a-card>
</template>

<script>
import { PAGE_MENU_TYPE } from '@/store/mutation-types'
import { getAction, postAction } from '@/api/manage'
import { mapGetters } from 'vuex'
import Diet from './lifestyleinfo/Diet'
import Movement from './lifestyleinfo/Movement'
import Drinking from './lifestyleinfo/Drinking'
import Smoking from './lifestyleinfo/Smoking'
import SleepQuality from './lifestyleinfo/SleepQuality'

export default {
  name: 'LifeStyle',
  components: { Diet, Movement, Drinking, Smoking, SleepQuality },
  data() {
    return {
      loading: true,
      active: '1',
      list: [],
      model: {}
    }
  },
  created() {
    this.getLifeStyle()
    this.getType()
  },
  methods: {
    ...mapGetters(['orgCode']),
    getType() {
      postAction('/suggest/category/list', { orgCode: this.orgCode() }).then(res => {
        if (res.success) {
          this.list = res.result
        } else {
          console.log(res.message)
        }
      })
    },
    getLifeStyle() {
      let patientId = this.$route.query[PAGE_MENU_TYPE.PatientId]
      getAction('/dossier/14/lifeway', {
        patientId: patientId
      })
        .then(res => {
          if (res.success) {
            this.model = res.result
          } else {
            console.log('获取患者生活方式信息失败，自动为该患者新建一个空档案')
            postAction('102/14/1021401', {
              patientId: patientId
            }).then(newRes => {
              if (newRes.success) {
                this.getLifeStyle()
              } else {
                this.$message.error('患者档案创建失败')
              }
            })
          }
        })
        .finally(_ => {
          this.loading = false
        })
    },
    save(type) {
      let queryData = JSON.parse(JSON.stringify(this.model))
      postAction('/102/14/1021401', queryData)
        .then(res => {
          if (res.success) {
            this.$message.success('操作成功')
          } else {
            this.$message.error('操作失败')
          }
        })
        .finally(_ => {
          this.$refs['lifestyleForm' + type].saveLoading = false
        })
    },
    next(type) {
      this.active = type
    },
    doConfirm(type) {
      let patientId = this.$route.query[PAGE_MENU_TYPE.PatientId]
      let params = {
        patientId: patientId,
        isFinished: 1,
        type
      }
      postAction('/102/10/1021403', params)
        .then(res => {
          if (res.success) {
            this.$message.success('页面已确认', 5)
          }
        })
        .finally(_ => {
          this.$refs['lifestyleForm' + type].saveLoading = false
        })
    }
  }
}
</script>

<style lang="less" scoped>
.tab-bg-color {
  padding: 15px;
}
</style>

